<template>
  <a-drawer v-model:open="open" :mask-closable="false" class="custom-class" root-class-name="root-class-name"
    width="40%" :title="props.type == 'add' ? '新增账号' : '编辑账号'" placement="right" @close="closebtn">
    <a-form ref="formRef" :model="formState.info" :rules="rules" layout="vertical">
      <a-form-item ref="avatar" label="头像" name="avatar">
        <uploadImg v-model:value="formState.info.avatar" />
      </a-form-item>

      <a-form-item ref="userName" label="账号" name="userName">
        <a-input v-model:value="formState.info.userName" />
      </a-form-item>
      <a-form-item ref="name" label="名称" name="name">
        <a-input v-model:value="formState.info.name" />
      </a-form-item>
      <a-form-item ref="phoneNumber" label="电话" name="phoneNumber">
        <a-input v-model:value="formState.info.phoneNumber" placeholder="请输入电话" />
      </a-form-item>
      <a-form-item ref="gender" label="性别" name="gender">
        <a-radio-group v-model:value="formState.info.gender" name="radioGroup" :options="genders">
        </a-radio-group>
      </a-form-item>

      <a-form-item ref="useStatus" label="状态" name="useStatus">
        <a-radio-group v-model:value="formState.info.useStatus" name="radioGroup" :options="usertypes">
        </a-radio-group>
      </a-form-item>
    </a-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button style="margin-right: 8px" @click="closebtn">取消</a-button>
        <a-button type="primary" @click="infobtn" :loading="formState.loading">确定</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { computed, inject, reactive, ref, watch } from 'vue';

import { message } from 'ant-design-vue';
import uploadImg from '#/components/uploadImg/index.vue';
import * as api from '#/api/core/account';




const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: 'add',
  },
  editdata: {
    type: Object,
    default: () => { },
  },
});


const usertypes = inject('usertype')
const genders = inject('gender')

const emits = defineEmits(['update:value', 'submit', 'close']);

const formRef = ref();


const formState = reactive({
  loading: false,
  info: {
    name: '',
    avatar: '',
    userName: '',
    useStatus: 1,
    gender: 1,
    phoneNumber: ''
  },
});



const rules = {

  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'change',
    },
  ],
  userName: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'change',
    },
  ],
  phoneNumber: [
    {
      required: true,
      message: '请输入电话',
      trigger: 'change',
    },
    {
      min: 11,
      max: 11,
      message: '请输入正确的手机号格式',
      trigger: 'blur',
    },
  ],
};

watch(
  () => props.value,
  async (newV) => {
    console.log('props', props.editdata);

    if (newV && props.type == 'update') {
      try {
        let temp = await api.$getdesc(props.editdata?.id, {})

        console.log('账号详情', temp);

      } catch { }
      formState.info.name = props.editdata?.name;
      formState.info.avatar = props.editdata?.avatar;
      formState.info.userName = props.editdata?.userName;
      formState.info.useStatus = props.editdata?.useStatus;
      formState.info.gender = props.editdata?.gender;
      formState.info.phoneNumber = props.editdata?.phoneNumber;
    } else {
      formState.info.name = ''
      formState.info.avatar = ''
      formState.info.userName = ''
      formState.info.useStatus = 1
      formState.info.gender = 1
      formState.info.phoneNumber = '';

    }
  },
  {
    immediate: true,
  },
);

const open = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits('update:value', val);
  },
});



const infobtn = () => {
  console.log('info', formState.info);

  formRef.value
    .validate()
    .then(async () => {
      try {
        if (props.type == 'add') {
          formState.loading = true

          await api.$createaccount({
            ...formState.info,
            "roleIds": [],
            // "surname": "",
            // "organizationUnitIds": [],
            // "jobNumber": "",
            // "birthday": "",
            // "entryTime": "",
            // "idNumber": ""
          });
          message.success('添加成功');
          open.value = false;
          emits('submit');
          formState.loading = false
        } else {

          formState.loading = true

          await api.$updateaccount(props.editdata.id, { ...formState.info });
          message.success('编辑成功');
          open.value = false;
          emits('submit');

          formState.loading = false

        }
        // debugger
      } catch (error) {
        console.log('error', error);
      }
    })
    .catch((error: any) => {
      console.log('error', error);
    });
};

const closebtn = () => {
  open.value = false;


};

</script>
